<template>
    <div>
        <input 
            class="input" 
            type="txt" 
            @keyup.enter="add" 
            v-model="title" 
            placeholder="     输入需要添加的任务，按回车确认"
        />
    </div>
</template>

<script>
import{nanoid} from 'nanoid'

export default {
    name:"Top",
    data(){
        return {title:"",}
    },
    methods:{
        add(){
            //校验数据
            if(!this.title){
                return
            }
            //将用户的输入包装成为一个todo对象
            //nanoid会生成一个唯一id
            const todoObj = {id:nanoid(),title:this.title,done:false};
            this.title="";                                                  //清空输入
            this.$emit("addTodoObj",todoObj);
            
             
        }
    },
    //这里的addTodoObj也是一个函数，是跟父组件App中的addTodoObj函数绑定的

}
</script>

<style scoped>
    .input{
        outline:none;
        border-radius: 13px;
        border: 1px solid #c8cccf;
        width:400px;
        height: 30px;
        position: absolute;
        top:30px;
        left:200px;
        box-shadow:#c8cccf 0px 0px 8px 1px;
    }

</style>